<template >
    <el-dialog :title="options.title||'提示'" :visible.sync="options.dialogVisible" :width="options.width||width" v-bind="options" v-on="options" v-dialogDrag>
        <transition name="el-fade-in">
            <render :render="render" :options="options" v-if="options.dialogVisible"></render>
        </transition>
        <span :slot="options.slot||'footer'" class="dialog-footer">
            <template v-for="(item,i) in btns">
                <el-button v-bind="item" :key="i" @click="handerClick(item)" :loading="false" v-if="item.submit">{{item.content}}</el-button>
                <el-button v-bind="item" :key="i" @click="handerClick(item)" v-else>{{item.content}}</el-button>
            </template>
        </span>
    </el-dialog>
</template>

<script>
import render from "./render.vue";
export default {
    data () {
        return {
            width: "60%",
            options: {
                dialogVisible: false,
            },
            render () { },
            btns: [],
        };
    },
    methods: {
        handerClick (item) {
            item?.click(this.options, item);
        },
    },
    components: {
        render,
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
    border-bottom: 1px solid #e8eaec;
}
::v-deep .el-dialog {
    border-radius: 6px;
}
</style>
